<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>s03-模板语法</title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<span id="app1" v-once>this will not change: {{ msg }}</span>
		<hr />
		<p id='app2'>{{rawHtml}}</p>
		<p>Using v-html directive: <span id="app3" v-html='rawHtml'></span></p>
		<hr />
		<div v-bind:id="dynamicId"></div>
		<!-- 对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中，
		 如果 isButtonDisabled 的值是 null、undefined 或 false，
		 则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中
		 -->
		<button v-bind:disabled="isButtonDisabled">Button</button>
		
		<hr />
		
		<div id='app4'>{{number + 1}}</div>
		<hr />
		<div id='app5'>{{ ok ? 'YES' : 'NO'}}</div>
		<hr />
		<div id='app6'>{{ message.split('').reverse().join('')}}</div>
		<hr />
		<div id="app7">
			<div v-bind:id="'list-' +id">test_app8_id_expression</div>
		</div>
		<hr />
		<strong>v-bind 缩写：</strong>
		<hr />
		<!-- 完整语法 -->
		<a v-bind:href="url">完整语法</a>
		<hr />
		<!-- 缩写 -->
		<a :href="url">缩写</a>
		<hr />
		<!-- 动态参数的缩写 (2.6.0+) -->
		<a :[key]="url"> 动态参数的缩写 </a>
		<hr />
		<strong>v-on 缩写：</strong>
		<hr />
		<!-- 完整语法 -->
		<a v-on:click="doSomething">完整语法</a>
		<hr />
		<!-- 缩写 -->
		<a @click="doSomething">缩写</a>
		<hr />
		<!-- 动态参数的缩写 (2.6.0+) -->
		<a @[event]="doSomething"> 动态参数的缩写 </a>
		<hr />
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app1',
				data: {msg: 'hello'}
			})
			
			vm.msg = "hi..."
			
			new Vue({
				el: '#app2', 
				data: {rawHtml: '<span style="color: red">this should be red!</span>'}
			})
			
			new Vue({
				el: '#app3', 
				data: {rawHtml: '<span style="color: red">this should be red!</span>'}
			})
			
			new Vue({
				el: '#app4',
				data: {
					number: 1
				}
			})
			
			new Vue({
				el: '#app5',
				data: {ok: true}
			})
			
			new Vue({
				el: '#app6',
				data: {message: 'hello vue'}
			})
			
			new Vue({
				el: '#app7',
				data: {id: 'a001'}
			})
			
		</script>
	</body>
</html>
